<template>
	<view>
		<view>
			<head-title :file="file" :repairId="repairId" :dormitoryNo="dormitoryNo" :classId="classId"
				:className="className" :bdormitoryId="bdormitoryId" :titleHead="titleHead" :btnFont="mainTitle"
				:deviceIds="deviceIds" :photo='imgShow' :repairDesc="repairDesc"></head-title>
			<view class="repDevice">维修说明</view>
			<view class="repCheckout">
				<textarea class="inputSty uni-input" maxlength="80" v-model="repairDesc" />
				<!-- 维修管理员说明信息 -->
			</view>
			<view class="repDevice" style="margin-top:60rpx;">拍照</view>
			<view>
				<view class="repDevice" style="position: relative;top:180rpx;left:230rpx">上传照片</view>
				<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
			</view>
			<view class="logoSty"></view>
		</view>
		<!-- <my-bottom :bottomArr="Repbottoms"></my-bottom> -->
	</view>
</template>

<script>
	import * as imageConversion from 'image-conversion'
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '../../utils/index.js'
	export default {
		name: 'repStatus',
		data() {
			return {
				file: {},
				mainTitle: '完成维修',
				topName: '202宿舍',
				userName: '',
				titleHead: '正在处理',
				dormitoryNo: '',
				imgShow: '',
				Repbottoms: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "首页",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages/maintenance/maintenanceIndex'
					}
				],
				repairDesc: '',
				deviceIds: [],
				repairId: 0,
				className: '',
				bdormitoryId: 1,
				classId: 1,
			}
		},
		onShow() {
			// var that =this
			// uni.getStorage({
			// 	key:"loginName",
			// success:(res)=>{
			// 	that.userName = res.data
			// }
			// })
			this.userName = uni.getStorageSync("loginName")
		},


		onLoad(options) {
			// console.log(new FormData(),123)
			this.repairId = options.repairId
			this.className = options.className
			this.bdormitoryId = options.bdormitoryId
			this.classId = options.classId
			this.dormitoryNo = options.dormitoryNo
		},
		mounted() {
			console.log(!this.className, "className")
			if (this.className) {
				this.getClassRepairInfoById()
			} else {
				this.getRepairInfoById()
			}

		},
		methods: {
			getClassRepairInfoById() {
				this.deviceIds = []
				this.$api.maintenance.getClassRepairInfoById(this.repairId).then(res => {
					this.repairDesc = res.data.repairDesc
					this.photo = res.data.photo
					// this.deviceIds.push(res.data.devicesId)
					// res.data.devicesId.forEach(item => {
					// 	this.deviceIds.push(item)
					// })
					this.deviceIds = res.data.devicesId.split(",")
					this.topName = res.data.className
					console.log("this.deviceIds", this.deviceIds)
				})
			},
			getRepairInfoById() {
				this.deviceIds = []
				this.$api.maintenance.getRepairInfoById(this.repairId).then(res => {
					this.repairDesc = res.data.repairDesc
					this.photo = res.data.photo
					this.deviceIds.push(res.data.devicesId)
					this.topName = res.data.dormitoryNo
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					success: async res => {
						console.log(res)
						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)
						// this.file = res.tempFiles[0];
					}
				})
				// var _this = this
				// uni.chooseImage({
				// 	count:1,
				// 	sizeType:['original','compressed'],
				// 	sourceType:['album','camera'],
				// 	success:function(res){
				// 		_this.imgShow = res.tempFilePaths[0]
				// 		pathToBase64(res.tempFilePaths[0])
				// 		  .then(base64 => {						  
				// 			_this.imgShow = base64
				// 		  })
				// 		  .catch(error => {
				// 		    console.error(error)
				// 		  })	
				// 	}
				// })
			}

		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
	}
</script>

<style>
	.inputSty {
		word-wrap: break-word;
		font-size: 36rpx;
		color: #8F8F94;
		padding: 10rpx;
		width: 620rpx;
		height: 180rpx;
		word-break: break-all;
		white-space: inherit;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 600rpx;
		height: 300upx;

		padding: 10upx;
		margin-left: 50rpx;
		margin-top: 0rpx
	}

	.repDevice {
		text-align: left;
		font-size: 32upx;
		color: #808080;
		padding-left: 50upx;
	}

	.repText {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 500upx;
		height: 150upx;
		margin: auto;
		padding: 10upx;
	}

	.repCheckout {
		height: 150rpx;
		font-size: 28upx;
		color: #808080;
		margin-top: 30upx;
		width: 720rpx;
		margin-left: 50upx;
	}

	.repDevice {
		text-align: left;
		font-size: 42rpx;
		color: #808080;
		padding-left: 50upx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 0upx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;
	}
</style>